<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS执行顺序</title>
</head>
<!--
        js解释器： V8（Chrome的JS引擎）
        1、JS第一阶段：编译期  ————>  对代码进行静态分析：找声明的变量和函数,检查语法是否正确
        2、JS第二阶段：执行期  ————>  运行JS代码

------------------------------------------------------------------------------------------


        箭头函数：
            let x = (n) => n+1 相当于——>  let x = function(n){
                                            return n+1
                                          }

        箭头后边不能添加任何语句，是return值了
        如果有多余的语句想要添加则要变成花括号

            let x = (n) => {
                ......
                return ....
            }

        ！！！注意：箭头函数的this是固化的，相当于没有this，所以使用this就要向上一层作用域寻找



-->
<body>
    <script>
        console.log("JS执行顺序");

        let a = 1;

        function fn( a = 2 ) {
            console.log(a);
        }

        fn(a);
        //运行结果为1

        let b = 1;

        function fn( b = b ) {
            console.log(b);
        }

        fn();
        //报错b is not defined
        /*
        *   当函数的形参有默认值得时候，函数会产生临时作用域
        *   这种写法是es6新增加的，相当于使用了let
        *
        * */

    </script>
    <script>

        console.log(c);
        //运行结果为ƒ c() {}

        function c() {}

        var c = 1;

        console.log(c);



        console.log(d);
        //运行结果仍然为ƒ c() {}

        var d = 1;

        function d() {}

        console.log(d);
        //运行结果仍然为1
        /*
        *   在编译期时，如果同作用域出现函数声明和var等的声明变量关键字
        *   所声明的变量名冲突时，function会覆盖其他的变量名，因为function
        *   的权重值更高（let会直接报错，因为es6中标明不可以再次声明）
        *
        *   分析代码执行过程：（以d为例）
        *
        *   编译期：
        *       var d = undefined
        *       function d(){}
        *   执行期：
        *       65行的console.log
        *       d = 1
        *       72行的console.log
        *
        * */


    </script>
    <script>

        console.log("箭头函数");


        let x = (n) => n+1;
        console.log(x(0));

        let y = (n) => {
            let b = n;
            return b;
        };
        console.log(y(0))
    </script>
</body>
</html>